<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card mb-3">
    <div class="card-header font-weight-bold">
        <i class="fa fa-wrench"></i> Setting
    </div>
    <div class="card-body">
        <div class="media">
            <div class="align-self-center mr-3">
               <i class="fa fa-server fa-3x color-edgex-red"></i>  
            </div>
            <div class="media-body">
              <!-- <div class="d-inline font-weight-bold ml-3 float-right">
                    <span class="badge badge-primary mr-1">executor </span>
                    <span *ngIf="metrics" class="text-weight">{{metrics.executor}}</span>  
              </div> -->
              <h5 class="mt-0 font-weight-bold">{{service}} <span class="badge badge-success">up</span></h5>
              
              <div class="font-weight-bold d-inline">
                <span class="badge badge-info mr-2">mem_usage</span>
                <span *ngIf="metrics" class="text-weight">{{metrics.raw.mem_usage}} </span>  
              </div>
             
              <div class="font-weight-bold ml-2 d-inline">
                <span class="badge badge-warning mr-1">cpu_usage</span>
                <span *ngIf="metrics" class="text-weight">{{metrics.cpuUsedPercent}}%</span>  
              </div>

              <div class="font-weight-bold ml-2 d-inline">
                <span class="badge badge-primary mr-1">net_io</span>
                <span *ngIf="metrics" class="text-weight">{{metrics.raw.net_io}}</span>  
              </div>
              
            </div>
        </div>
        <div class="input-group mb-3 mt-3" style="width: 200px;">
            <div class="input-group-prepend">
              <span class="input-group-text ">Refresh Rate</span>
            </div>
            <select class="form-control" [(ngModel)]="refreshRate" (ngModelChange)="onRateSelect()">
                <option selected value=3>3s</option>
                <option value=5>5s</option>
                <option value=10>10s</option>
                <option value=15>15s</option>
              </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header"><i class="fa fa-area-chart"></i>Memory usage</div>
            <div class="card-body overflow-auto">
                <div class="vw-auto" id="memory-usage" style=" height:300px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header"><i class="fa fa-area-chart"></i>CPU usage</div>
            <div class="card-body overflow-auto">
                <div class="vw-auto" id="cpu-usage" style="height:300px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 ">
        <div class="card">
            <div class="card-header"><i class="fa fa-area-chart"></i>Network traffic</div>
            <div class="card-body overflow-auto">
                <div class="vw-auto" id="network-usage" style="height:300px;"></div>
            </div>
        </div>
    </div>
</div>